<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<style>
		.classA{
			color: red;
		}
		.classB{
			font-size: 150%;
		}
		.classC{
			color: green;
		}
	</style>
	<body>
		<div id="app">
			<div><img v-bind:src="imgSrc"></div>
			<p><a :href="webUrl" target="_blank">跳转到百度</a></p>
			<hr />
			<div :class="classA">字体红色classA</div>
			<div :class="classB">字变大classB</div>
			<div :class="[classA,classB]">字变大classB</div>
			<hr />
			<div :class="{classC:isOk}">加上classC类字体变绿色</div>
			
			<div :class="isOk?classA:classB">三目判断</div>
			<p><input type="checkbox" v-model="isOk" />{{isOk}}</p>
			
			<div :style="{color:bule,fontSize:font}">绑定style</div>
			<div :style="ObjectStyle">用对象绑定style样式</div>
		</div>
		<script>
		 var app = new Vue({
		 	el:"#app",
		  	data:{
		  		imgSrc:"https://cn.vuejs.org/images/xiaozhuanlan-sidebar.png",
		  		webUrl:"http://jspang.com/2017/02/23/vue2_01/",
		  		classA:"classA",
		  		classB:"classB",
		  		isOk:true,
		  		bule:'pink',
		  		font:"20px",
		  		ObjectStyle:{
		  			color:"red",
		  			fontSize:"30px"
		  		}
		  	}
		 })
		</script>
	</body>
</html>
